import { Image, Pressable, StyleSheet, Text, View, ScrollView } from 'react-native';
import React, { useState, useEffect } from 'react';
import { useRoute } from '@react-navigation/native';
import { useTranslation } from 'react-i18next';
import { deviceStore, observer, webSocketStore } from '~/store';
import { NavBarHeader } from '~/components';
import { themeHA08AC, themeHA08B, themeHA08, themeHA03 } from '~/utils/deviceMenues';
import { px2dp, width } from '~/utils/px2dp';
import { getBleTheme, setBleTheme } from '~/utils/ble/application';

const WatchTheme = observer(() => {
    const router: any = useRoute();
    const { t } = useTranslation();
    const { type, device_sn, subDevice_sn, device_code } = router.params || {};
    const { themeIndex } = deviceStore;
    const { linkSubDeviceStatus } = webSocketStore;
    const [clockdialist, setClockdialist] = useState(
        device_code == 'HA08B'
            ? themeHA08B
            : device_code == 'HA08Z' || device_code == 'HA08T' || device_code == 'HA08ZW'
            ? themeHA08
            : device_code == 'HA03G' || device_code == 'HA03W' || device_code == 'HA03B' || device_code == 'HA03C'
            ? themeHA03
            : themeHA08AC,
    );
    // 查询主题
    const getThemeIndex = () => {
        getBleTheme(router.params);
    };
    // 切换主题
    const switchTheme = (index) => {
        if (linkSubDeviceStatus == 0 && deviceStore.device.connectedDeviceStatus == 0) {
            Toast.show({ content: t('WatchTheme.t1') });
            return;
        }
        setBleTheme(index, router.params);
        setTimeout(() => {
            getThemeIndex();
        }, 300);
    };

    useEffect(() => {
        getThemeIndex();
    }, []);

    return (
        <View style={styles.container}>
            <NavBarHeader title={t('WatchTheme.title')} />
            <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.contentContainerStyle}>
                <View style={[styles.list, styles.row]}>
                    {clockdialist.map((item, index) => {
                        return (
                            <Pressable key={item.id} style={[styles.listItem]} onPress={() => switchTheme(index)}>
                                <Image source={{ uri: item.img }} style={styles.cover} />
                                <View style={[styles.row]}>
                                    {/* <Text>{item.title}</Text> */}
                                    {themeIndex == index ? (
                                        <Image
                                            source={require('~/assets/deviceTools/isSelect.png')}
                                            resizeMode="stretch"
                                            style={styles.selectIcon}
                                        />
                                    ) : (
                                        <Image
                                            source={require('~/assets/deviceTools/select.png')}
                                            resizeMode="stretch"
                                            style={styles.selectIcon}
                                        />
                                    )}
                                </View>
                            </Pressable>
                        );
                    })}
                </View>
            </ScrollView>
        </View>
    );
});

export default WatchTheme;
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    contentContainerStyle: {
        paddingBottom: '20%',
        flexGrow: 1,
        marginTop: px2dp(32),
    },
    list: {
        justifyContent: 'space-between',
        flexWrap: 'wrap',
        marginHorizontal: px2dp(32),
    },
    listItem: {
        marginBottom: px2dp(32),
        alignItems: 'center',
        marginRight: px2dp(12),
    },
    cover: {
        width: (width - px2dp(64) - px2dp(56)) / 2,
        height: px2dp(300),
        borderRadius: px2dp(22),
        marginBottom: px2dp(32),
    },
    selectIcon: {
        width: px2dp(40),
        height: px2dp(40),
        marginLeft: px2dp(12),
    },
});
